<template slot-scope="scope">
  <div class="intelligentIrrigation">
    <div class="top">
      <div class="nowDay">{{ nowDay }}</div>
      <div class="nowWeek">{{ nowWeek }}</div>
      <div class="nowTime">{{ gettime }}</div>
      <div class="weather">
        <img :src="weatherData.weatherIcon" width="22px" height="16px" alt="" />
        <div class="weatherNum">{{ weatherData.weatherNum }} <span class="weatherUnit">℃</span></div>
        <div class="weatherWord">{{ weatherData.weatherWord }}</div>
      </div>
      <div class="systemIcon" @click="systemClick"></div>
    </div>
    <div class="content">
      <!-- gis模块dom -->
      <div class="gis">
        <!-- 水闸 -->
        <div class="point1" @click="qhsz('sc000004')"></div>
        <!-- 机井 -->
        <div class="point2" @click="jjClick"></div>
        <!-- <div class="point7" @click="showModalCamera"></div> -->
        <!-- 水闸 -->
        <div class="point10" @click="qhsz('sc000004')"></div>
        <!-- 水闸 -->
        <div class="point8" @click="qhsz('sc000004')"></div>
        <!-- 水闸 -->
        <div class="point9" @click="qhsz('sc000004')"></div>
        <div class="point3"></div>
        <div class="point4"></div>
        <!-- 墒情 -->
        <div class="point5" @click="sqClick"></div>
        <!-- 墒情 -->
        <div class="point11" @click="sqClick"></div>
        <!-- 摄像头 -->
        <div class="point6" @click="showModalCamera"></div>
      </div>
      <div class="content_left_1" id="contentLeft1">
        <div class="content_title">基本情况</div>
        <div class="closeButton" @click="closeContentLeft1"></div>
        <div class="content_left_1_content">
          <div class="contentRow">
            <div class="contentRowModule">
              <div class="contentRowName">地块编号：</div>
              <div class="contentRowValue">{{ jbqkData.landNo }}</div>
            </div>
            <div class="contentRowModule">
              <div class="contentRowName">地块面积：</div>
              <div class="contentRowValue">{{ jbqkData.landArea }}<span class="dkmjUnit"></span></div>
            </div>
          </div>
          <div class="splitLine"></div>
          <div class="contentRow">
            <div class="contentRowName">地块所属人：</div>
            <div class="contentRowValue">{{ jbqkData.peasantName }}</div>
          </div>
          <div class="splitLine"></div>
          <div class="contentRow">
            <div class="contentRowName">种植品种：</div>
            <div class="contentRowValue">{{ jbqkData.plantSpecies }}</div>
          </div>
          <div class="splitLine"></div>
          <div class="contentRow">
            <div class="contentRowName">田名称：</div>
            <div class="contentRowValue">{{ jbqkData.landName }}</div>
          </div>
          <div class="splitLine"></div>
          <div class="contentRow">
            <div class="contentRowName">灌溉来源：</div>
            <div class="contentRowValue">地下水</div>
          </div>
        </div>
      </div>
      <div class="openContentLeft1" id="openContentLeft1" @click="openContentLeft1"></div>
      <div class="content_left_2" id="contentLeft2">
        <div class="content_title">农业用水知识提示</div>
        <div class="closeButton" @click="closeContentLeft2"></div>
        <div class="content_left_2_content">
          <div class="searchContent">
            <div class="searchInputModule">
              <a-input type='text' v-model="key" placeholder="请输入内容" @change='change()'></a-input>
              <!-- <el-input type='text' v-model="key" placeholder="请输入内容" @change='change()'></el-input> -->
            </div>
            <div class="searchIconModule">
              <div class="searchIcon" @click="getListData()"></div>
            </div>
            <div class="listContent">
              <div v-for="(item, index) in listData" :key="index" class="listContentModule" @click="clickTs(item.id)">
                <div class="circle"></div>
                <div class="listWord" :style="{ width: '100px' }">
                  {{ item.pz }}
                </div>
                <div class="listWord" :style="{ width: '150px' }">
                  {{ item.jdm }}
                </div>
                <div class="listWord" :style="{ width: '200px' }">
                  {{ item.beginTime }}~{{ item.endTime }}
                </div>
                <div class="buttonIcon"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="openContentLeft2" id="openContentLeft2" @click="openContentLeft2"></div>
      <div class="content_center_top">
        <div class="content_center_top_module">
          <div class="content_center_top_module_icon jyl"></div>
          <div class="content_center_top_module_value">{{ topData.jyl }}</div>
          <div class="content_center_top_module_name">降雨量（m）</div>
        </div>
        <div class="content_center_top_module">
          <div class="content_center_top_module_icon ggl"></div>
          <div class="content_center_top_module_value">{{ topData.ggl }}</div>
          <div class="content_center_top_module_name">灌溉量（㎡）</div>
        </div>
        <div class="content_center_top_module">
          <div class="content_center_top_module_icon sw"></div>
          <div class="content_center_top_module_value">{{ znzmData.liquidLevel }}</div>
          <div class="content_center_top_module_name">液位(mm)</div>
        </div>
        <div class="content_center_top_module">
          <div class="content_center_top_module_icon sw"></div>
          <div class="content_center_top_module_value">{{ znzmData.flowRate }}</div>
          <div class="content_center_top_module_name">流量(m³/s)</div>
        </div>
      </div>
      <div class="content_right" id="contentRight">
        <div class="content_title" :style="{ left: '85px' }">智能闸门</div>
        <div class="closeButton" @click="closeContentRight"></div>
        <div class="content_right_top">
          <div class="znzmName">{{ znzmData.addressCode }}</div>
          <div class="znzmNumber">{{ znzmData.collectTime }}</div>
        </div>
        <div class="content_right_zb_module">
          <div class="zb_module">
            <div class="content_right_zb_module_icon zqsw"></div>
            <div class="content_right_zb_module_value">{{ znzmData.currentOpen=='100'?'打开':'关闭' }}</div>
            <div class="content_right_zb_module_name">开关</div>
          </div>
          <div class="zb_module">
            <div class="content_right_zb_module_icon zhsw"></div>
            <div class="content_right_zb_module_value">{{ znzmData.liquidLevel }}</div>
            <div class="content_right_zb_module_name">液位（mm）</div>
          </div>
          <div class="zb_module">
            <div class="content_right_zb_module_icon ll"></div>
            <div class="content_right_zb_module_value">{{ znzmData.flowRate }}</div>
            <div class="content_right_zb_module_name">流量（m³/s）</div>
          </div>
        </div>
        <div class="content_right_button_module">
          <div :class="contentRightButtonActive === 'swt' ? 'contentRightButtonActiveClass' : 'content_right_button'"
            @click="contentRightButtonClick('swt')">
            三维图
          </div>
          <div :class="contentRightButtonActive === 'ksh' ? 'contentRightButtonActiveClass' : 'content_right_button'"
            @click="contentRightButtonClick('ksh')">
            可视化
          </div>
        </div>
        <div class="content_right_middle_module">
          <div class="content_right_middle_module_content" v-show="contentRightButtonActive == 'swt'" id="sanwei">
            <div :style="{ width: '596px',  height: '256px'}">
              <video id="video" :src="videoSrc" style="object-fit: fill" width="100%" height="100%"
                preload="auto"></video>
            </div>
          </div>
          <div class="content_right_middle_module_content" v-show="contentRightButtonActive == 'ksh'">
            <div id="video-container2" style="margin：0 auto"></div>
          </div>
        </div>
        <div class="content_right_kd_module">
          <div class="dqkd">
            <div class="dqkdIcon"></div>
            <div class="dqkdName">当前开度：</div>
            <div class="dqkdValue">{{ znzmData.currentOpening }}<span class="dqkdUnit">cm</span></div>
          </div>
          <div class="sdszkd">
            <div class="sdszkdName">设定水闸开度(厘米):</div>
            <div class="sdszkdNumber">
            <!--   <el-input-number v-model="kaidu" controls-position="right"
                @change="inputNumberHandleChange"></el-input-number> -->
              <a-input-number v-model="kaidu" controls-position="right"
              @change="inputNumberHandleChange"></a-input-number>
            </div>
          </div>
        </div>
        <div class="content_right_bottom_module">
          <div class="content_right_bottom_module_icon"></div>
          <div class="content_right_bottom_module_content">
            <div class="sluiceNoModule">
              <div class="sluiceNoModuleName">水闸控制设备：</div>
              <div class="sluiceNoModuleValue">{{ znzmData.sluiceNo }}</div>
            </div>
            <div class="sbModule">
              <div class="sbztModule">
                <div class="sbztModuleName">设备状态：</div>
                <img :src="znzmData.sbztIcon" width="20px" height="20px" alt="" />
                <div class="sbztModuleValue">{{ znzmData.gateState }}</div>
              </div>
              <div class="sbgzModule">
                <div class="sbgzModuleName">设备故障：</div>
                <img :src="znzmData.sbgzIcon" width="20px" height="20px" alt="" />
                <div class="sbgzModuleValue">{{ znzmData.gateMalfunction }}</div>
              </div>
            </div>
            <div class="content_right_bottom_module_button">
              <div class="button_qd">
                <div class="button_qd_icon"></div>
                <div class="button_qd_name" @click="zmStart">开闸</div>
              </div>
              <div class="button_jt">
                <div class="button_jt_icon"></div>
                <div class="button_jt_name" @click="zmStop">急停</div>
              </div>
              <div class="button_zdkz" @click="zmMaxStart">最大开闸</div>
              <div class="button_gbfm" @click="zmStop">关闭阀门</div>
            </div>
          </div>
        </div>
        <div class="content_right_control_module">
          <div class="control_module" @click="controlChange('yckz')">
            <div class="control_icon" :class="currentControl === 'yckz' ? 'yckz_icon_active' : 'yckz_icon'"></div>
            <div :class="currentControl === 'yckz' ? 'control_name_active' : 'control_name'">远程控制</div>
          </div>
          <div class="control_module" @click="controlChange('xsmx')">
            <div class="control_icon" :class="currentControl === 'xsmx' ? 'xsmx_icon_active' : 'xsmx_icon'"></div>
            <div :class="currentControl === 'xsmx' ? 'control_name_active' : 'control_name'">需水模型</div>
          </div>
          <div class="control_module" @click="controlChange('gjgl')">
            <div class="control_icon" :class="currentControl === 'gjgl' ? 'gjgl_icon_active' : 'gjgl_icon'"></div>
            <div :class="currentControl === 'gjgl' ? 'control_name_active' : 'control_name'">告警管理</div>
          </div>
          <div class="control_module" @click="controlChange('lssj')">
            <div class="control_icon" :class="currentControl === 'lssj' ? 'lssj_icon_active' : 'lssj_icon'"></div>
            <div :class="currentControl === 'lssj' ? 'control_name_active' : 'control_name'">历史数据</div>
          </div>
          <div class="control_module" @click="controlChange('czjl')">
            <div class="control_icon" :class="currentControl === 'czjl' ? 'czjl_icon_active' : 'czjl_icon'"></div>
            <div :class="currentControl === 'czjl' ? 'control_name_active' : 'control_name'">操作记录</div>
          </div>
          <div class="control_module" @click="controlChange('whjl')">
            <div class="control_icon" :class="currentControl === 'whjl' ? 'whjl_icon_active' : 'whjl_icon'"></div>
            <div :class="currentControl === 'whjl' ? 'control_name_active' : 'control_name'">维护记录</div>
          </div>
        </div>
      </div>
      <div class="openContentRight" id="openContentRight" @click="openContentRight"></div>
      <div class="legendModule" id="legendModule">
        <div class="legendTitle">图例说明</div>
        <div class="closeButton" @click="closeLegend"></div>
        <div class="legendContent">
          <div class="legendContentModule">
            <div class="legendIcon legendIconNysz"></div>
            <div class="legendWord">农用水闸</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconJj"></div>
            <div class="legendWord">机井</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconBz"></div>
            <div class="legendWord">泵站</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconQx"></div>
            <div class="legendWord">气象</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconSp"></div>
            <div class="legendWord">视频</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconSq"></div>
            <div class="legendWord">墒情</div>
          </div>
        </div>
      </div>
      <div class="openLegend" id="openLegend" @click="openLegend"></div>
      <!-- <JjDialog :visible="dialogListVisible" @close="dialogCloseClick"></JjDialog>
      <XinXi :visible="xinXiVisible" @close="xinxiCloseClick" :tsId="tsId"></XinXi>
      
      <AlarmManagement :visible="ycVisible" @close="ycCloseClick"></AlarmManagement>
      <MaintenanceRecord :visible="whVisible" @close="whCloseClick"></MaintenanceRecord>-->
      <ShangQing :visible="sqVisible" @close="sqCloseClick"></ShangQing>
      <GateOperationRecord :visible="czVisible" @close="czCloseClick"></GateOperationRecord> 
      <SluiceTraffic :visible="lsVisible" @close="lsCloseClick"></SluiceTraffic>
      <!-- <ZmDialog :visible="dialogListVisible2" @close="dialogCloseClick2" :type="zmCurrentType"></ZmDialog> -->
    </div>
    <j-modal title="实时监控" switchFullscreen :visible="visible" :confirm-loading="confirmLoading" :width="width"
      @ok="handleOk" @cancel="handleCancel">
      <div id="video-container1" style="margin：0 auto"></div>
    </j-modal>
  </div>
</template>

<script>
  // import JjDialog from '@/views/components/intelligentIrrigation/jjDialog'
  // import ZmDialog from '@/views/components/intelligentIrrigation/zmDialog'
  // import XinXi from '@/views/components/intelligentIrrigation/xinXi'
  import ShangQing from '@/views/components/intelligentIrrigation/shangQing'
  // import MaintenanceRecord from '@/views/components/intelligentIrrigation/maintenanceRecord'
  // import AlarmManagement from '@/views/components/intelligentIrrigation/alarmManagement'
  import GateOperationRecord from '@/views/components/intelligentIrrigation/gateOperationRecord'
  import SluiceTraffic from '@/views/components/intelligentIrrigation/sluiceTraffic'
  
  // import EZUIKit from 'ezuikit-js'//放在public下引用 放在这里 导致大屏打不开
  import {
    postAction,
    getAction
  } from '@/api/manage'
  import {
    message
  } from 'ant-design-vue'
  var player1 = null
  export default {
    components: {
      // JjDialog,
      // ZmDialog,
      // XinXi,
      ShangQing,
      // MaintenanceRecord,
      // AlarmManagement,
      GateOperationRecord,
      SluiceTraffic,
    },
    data() {
      return {
        videoSrc: require('../../assets/images/intelligentIrrigation/open.mp4'),
        tsId: '',
        xinXiVisible: false,
        sqVisible: false,
        ycVisible: false,
        kaidu: 0,
        czVisible: false,
        lsVisible: false,
        whVisible: false,
        //摄像头
        visible: false,
        confirmLoading: false,
        description: '摄像头设备管理页面',
        width: 850,
        // 顶部时间变量
        gettime: '',
        nowWeek: '',
        nowDay: '',
        searchObj: {},
        // 天气数据
        weatherData: {
          weatherIcon: require('../../assets/images/intelligentIrrigation/weatherIcon.png'),
          weatherNum: '22.6',
          weatherWord: '多云转晴',
        },
        key: '',
        // 基本情况模块数据
        jbqkData: {},

        // 左侧第二模块输入框绑定变量
        contentLeft2Input: '',
        // 左侧第二模块列表数据
        listData: [],
        // 机井弹窗显隐控制变量
        dialogListVisible: false,
        // 传递给子组件当前闸门的类型
        zmCurrentType: '',
        // 闸门弹窗显隐控制变量
        dialogListVisible2: false,

        // 顶部四个指标数据
        topData: {
          // 降雨量
          jyl: '3.002',
          // 灌溉量
          ggl: '3.002',
          // 水位
          sw: '3.002',
        },
        sanweiInnerHTML: '',
        // 智能闸门模块数据
        znzmData: {},
        // 智能闸门模块三维图和可视化按钮切换变量
        contentRightButtonActive: 'swt',
        // 智能闸门当前显示功能
        currentControl: 'yckz',
      }
    },
    computed: {},

    created() {
      this.getListData()
      this.getGateByCode('sc000004')
      // this.getLandInfo()
      this.currentTime()
    },
    methods: {

      //获取农业用水知识
      getListData() {
        getAction('/wiis/rpk/indexList', {
          key: this.key
        }).then((res) => {
          this.listData = res.result
        })
      },

      //启动闸门
      zmStart() {
        const param = {
          addressCode: this.znzmData.addressCode,
          openPercent: '100'
        };
        this.gateControl(param);
      },
      //最大开闸
      zmMaxStart() {
        const param = {
          addressCode: this.znzmData.addressCode,
          openPercent: '100'
        };
        this.gateControl(param);
      },
      //关闭闸门
      zmStop() {
        const param = {
          addressCode: this.znzmData.addressCode,
          openPercent: '0'
        };
        this.gateControl(param);
      },
      //获取闸门信息
      getGateByCode(code) {
        getAction(`/wiis/gateMonitor/getRealTimeData/${code}`, {}).then((res) => {
          // console.log(res);
          if (res.success) {
            if( res.result){
               this.znzmData =res.result
            }
           
            this.znzmData.sbztIcon = require('../../assets/images/intelligentIrrigation/sbztIcon.png')
            this.znzmData.sbgzIcon = require('../../assets/images/intelligentIrrigation/sbztIcon.png')
          }

        })
      },
      gateControl(param) {
        this.loading = true;
        postAction('/wiis/gateMonitor/gateControl', param).then(res => {
          // console.log(res)
          if (res.success) {
            message.success(res.message)
          } else {
            message.error(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },

      getLandInfo(landNo = '实验田1') {
        getAction('/youyi/youyiLandManage/queryByLandNo', {
          landNo: this.landNo
        }).then((res) => {
          this.jbqkData = res.result
        })
      },

      //弹出视频监控界面
      showModalCamera() {
        this.loading = true;
        getAction(`/wiis/cameraMonitor/getYingshiToken`, {}).then((res) => {
          if (res.success) {
            // console.log(res);
            this.visible = true
            let accessToken = res.result;
            // console.log("萤石accessToken",accessToken);
            player1 = new EZUIKit.EZUIKitPlayer({
              //摄像头10
              id: 'video-container1',
              accessToken: accessToken,
              url: `ezopen://open.ys7.com/J87842344/1.hd.live`,
              template: 'pcLive',
              plugin: ['talk'],
              width: 800,
              height: 600,
            })
          } else {
            console.error('error: : ', res)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      //视频监控 弹窗 确定
      handleOk(e) {
        this.ModalText = 'The modal will be closed after two seconds'
        this.confirmLoading = true
        setTimeout(() => {
          this.visible = false
          if (player1) {
            player1.stop()
          }
          this.confirmLoading = false
        }, 2000)
      },
      //视频监控 弹窗 取消
      handleCancel(e) {
        // console.log('Clicked cancel button')
        this.visible = false
        if (player1) {
          player1.stop()
        }
      },
      //切换水闸
      qhsz(sluiceNo) {
        this.openContentRight()
        this.getGateByCode(sluiceNo)
      },
      //闸门
      zmClick() {
        this.dialogListVisible2 = true
      },
      //机井
      jjClick() {
        console.log('点击了')
        this.dialogListVisible = true
      },
      change() {
        this.$forceUpdate(); //强制刷新
      },
      sqClick() {
        this.sqVisible = true
      },
      clickTs(id) {
        this.tsId = id
        this.xinXiVisible = true
      },
      // 视频播放方法
      startClickPlay(type) {
        let videoElement = document.getElementById('video')
        if (type == 'gateClose') {
          this.videoSrc = require('../../assets/images/intelligentIrrigation/close.mp4')
        } else this.videoSrc = require('../../assets/images/intelligentIrrigation/open.mp4')
        videoElement.play()
      },

      // 点击头部右上角图标按钮
      systemClick() {},
      // 四个模块css过渡方法
      closeContentLeft1() {
        document.getElementById('contentLeft1').style.left = '-445px'
        document.getElementById('contentLeft1').style.opacity = 0
        document.getElementById('openContentLeft1').style.opacity = 1
      },
      openContentLeft1() {
        document.getElementById('contentLeft1').style.left = '10px'
        document.getElementById('contentLeft1').style.opacity = 1
        document.getElementById('openContentLeft1').style.opacity = 0
      },
      closeContentLeft2() {
        document.getElementById('contentLeft2').style.left = '-445px'
        document.getElementById('contentLeft2').style.opacity = 0
        document.getElementById('openContentLeft2').style.opacity = 1
      },
      openContentLeft2() {
        document.getElementById('contentLeft2').style.left = '10px'
        document.getElementById('contentLeft2').style.opacity = 1
        document.getElementById('openContentLeft2').style.opacity = 0
      },
      closeContentRight() {
        console.log('点击了')
        if (player1) {
          player1.stop()
        }

        document.getElementById('contentRight').style.right = '-667px'
        document.getElementById('contentRight').style.opacity = 0
        document.getElementById('openContentRight').style.opacity = 1
      },
      openContentRight() {
        document.getElementById('contentRight').style.right = '22px'
        document.getElementById('contentRight').style.opacity = 1
        document.getElementById('openContentRight').style.opacity = 0
      },
      closeLegend() {
        document.getElementById('legendModule').style.top = '950px'
        document.getElementById('openLegend').style.opacity = 1
        document.getElementById('legendModule').style.opacity = 0
      },
      openLegend() {
        console.log('点击了', "openLegend")
        document.getElementById('legendModule').style.top = '806px'
        document.getElementById('legendModule').style.opacity = 1
        document.getElementById('openLegend').style.opacity = 0
      },

      // 点击左侧列表，弹出机井弹窗
      listDialogVisibleChange() {
        this.dialogListVisible = true
      },
      // 智能闸门模块点击三维图和可视化按钮的切换方法
      contentRightButtonClick(val) {
        this.contentRightButtonActive = val
        if (val == 'ksh') {

          this.showModalCamera();

        } else {
          if (player1) {
            player1.stop()
          }
        }
      },
      // 智能闸门模块数字选择框点击事件
      inputNumberHandleChange() {},
      // 智能闸门模块下方功能切换事件
      controlChange(val) {
        if (val === 'lssj') {
          this.lsVisible = true
        }
        if (val === 'whjl') {
          this.whVisible = true
        }
        if (val === 'gjgl') {
          this.ycVisible = true
        }
        if (val === 'czjl') {
          this.czVisible = true
        }
        // 点击需水模型，弹出一个新窗口
        if (val === 'xsmx') {
          // window.open('https://www.baidu.com/', '_blank')
        } else {
          this.zmCurrentType = val
          this.dialogListVisible2 = true
        }
        this.currentControl = val
      },
      lsCloseClick() {
        this.lsVisible = false
      },
      czCloseClick() {
        this.czVisible = false
      },
      xinxiCloseClick() {
        this.xinXiVisible = false
      },
      sqCloseClick() {
        this.sqVisible = false
      },
      ycCloseClick() {
        this.ycVisible = false
      },
      whCloseClick() {
        this.whVisible = false
      },
      // 机井模块关闭弹窗方法
      dialogCloseClick() {
        this.currentControl = 'yckz'
        this.dialogListVisible = false
      },
      // 闸门模块关闭弹窗方法
      dialogCloseClick2() {
        this.currentControl = 'yckz'
        this.dialogListVisible2 = false
      },
      // 获取当前时间
      currentTime() {
        setInterval(this.getTime, 500)
      },
      // 获取时间的方法
      getTime: function() {
        var _this = this
        let hh = new Date().getHours()
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        let wk = new Date().getDay()
        let year = new Date().getFullYear()
        let month = new Date().getMonth() + 1
        let day = new Date().getDay()
        month = month > 9 ? month : '0' + month
        day = day < 10 ? '0' + day : day
        let today = year + '-' + month + '-' + day
        let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let week = weeks[wk]

        _this.gettime = hh + ':' + mf + ':' + ss
        _this.nowWeek = week
        _this.nowDay = today
      },
    },

  }
</script>

<style lang="less" scoped>
  .intelligentIrrigation {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    .top {
      width: 1920px;
      height: 131px;
      background: url('../../assets/images/intelligentIrrigation/topBg1.png');
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      display: flex;
      background-color: #023a74;

      .nowTime {
        font-size: 26px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        font-weight: 400;
        text-align: left;
        color: #eafcff;
        margin: 25px 20px 0 0px;
      }

      .nowWeek {
        font-size: 18px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: left;
        color: #eafcff;
        margin: 30px 20px 0 0px;
      }

      .nowDay {
        font-size: 18px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: left;
        color: #eafcff;
        margin: 30px 20px 0 190px;
      }

      .weather {
        display: flex;
        position: absolute;
        top: 36px;
        right: 220px;

        .weatherNum {
          font-size: 26px;
          font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
          font-weight: 400;
          text-align: left;
          color: #cbf7ff;
          margin: 0 30px;
          line-height: 18px;
        }

        .weatherUnit {
          font-size: 20px;
          font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
          font-weight: 400;
          text-align: left;
          color: #cbf7ff;
        }

        .weatherWord {
          font-size: 18px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: bold;
          text-align: left;
          color: #cbf7ff;
          line-height: 18px;
        }
      }

      .systemIcon {
        width: 32px;
        height: 32px;
        background: url('../../assets/images/intelligentIrrigation/systemIcon.png');
        background-size: 100% 100%;
        position: absolute;
        right: 32px;
        top: 28px;
        cursor: pointer;
      }
    }

    .content {
      position: absolute;
      top: 78px;

      .content_title {
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(0deg, #1765ff 0%, #4a87ff 0%, #49d9fe 55%, #8fefff 80%);
        font-size: 24px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        position: absolute;
        left: 70px;
        top: 20px;
      }

      .gis {
        width: 1920px;
        height: 1000px;
        background: url('../../assets/images/intelligentIrrigation/gisBg2.jpg');
        background-size: 100% 100%;

        .point1 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point1.png');
          background-size: 100% 100%;
          position: absolute;
          top: 238px;
          left: 613px;
        }

        .point2 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point2.png');
          background-size: 100% 100%;
          position: absolute;
          top: 170px;
          left: 650px;
        }

        .point7 {
          width: 33px;
          height: 82px;
          background: url('../../assets/images/intelligentIrrigation/point6.png');
          background-size: 100% 100%;
          position: absolute;
          top: 170px;
          right: 300px;
        }

        .point8 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point1.png');
          background-size: 100% 100%;
          position: absolute;
          top: 200px;
          right: 280px;
        }

        .point9 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point1.png');
          background-size: 100% 100%;
          position: absolute;
          top: 100px;
          right: 350px;
        }

        .point10 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point1.png');
          background-size: 100% 100%;
          position: absolute;
          top: 60px;
          right: 380px;
        }

        .point3 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point3.png');
          background-size: 100% 100%;
          position: absolute;
          top: 300px;
          left: 800px;
        }

        .point4 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point4.png');
          background-size: 100% 100%;
          position: absolute;
          top: 400px;
          left: 780px;
        }

        .point5 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point5.png');
          background-size: 100% 100%;
          position: absolute;
          top: 500px;
          left: 660px;
        }

        .point11 {
          width: 28px;
          height: 34px;
          background: url('../../assets/images/intelligentIrrigation/point5.png');
          background-size: 100% 100%;
          position: absolute;
          top: 120px;
          right: 330px;
        }

        .point6 {
          width: 33px;
          height: 82px;
          background: url('../../assets/images/intelligentIrrigation/point6.png');
          background-size: 100% 100%;
          position: absolute;
          top: 400px;
          left: 550px;
        }
      }

      .content_left_1 {
        width: 446px;
        height: 302px;
        background: url('../../assets/images/intelligentIrrigation/content_left_1.png');
        background-size: 100% 100%;
        position: absolute;
        top: 5px;
        left: 10px;
        transition: all 1s;
        -moz-transition: all 1s;
        -webkit-transition: all 1s;
        -o-transition: all 1s;

        .closeButton {
          width: 14px;
          height: 79px;
          position: absolute;
          right: 0px;
          top: 127px;
          cursor: pointer;
        }

        .content_left_1_content {
          width: 400px;
          height: 202px;
          position: absolute;
          top: 93px;
          left: 20px;

          .contentRow {
            display: flex;
          }

          .contentRowModule {
            display: flex;
            width: 50%;
          }

          .contentRowName {
            opacity: 0.68;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #f4f9ff;
          }

          .contentRowValue {
            font-size: 16px;
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
            font-weight: bold;
            text-align: left;
            color: #f4f9ff;
          }

          .dkmjUnit {
            opacity: 0.68;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #f4f9ff;
          }

          .splitLine {
            width: 400px;
            border-top: 2px dashed #31678e;
            margin: 10px 0;
          }
        }
      }

      .openContentLeft1 {
        width: 13px;
        height: 78px;
        background: url('../../assets/images/intelligentIrrigation/openContentLeft1.png');
        background-size: 100% 100%;
        opacity: 0;
        position: absolute;
        top: 127px;
        cursor: pointer;
      }

      .content_left_2 {
        width: 446px;
        height: 629px;
        background: url('../../assets/images/intelligentIrrigation/content_left_2.png');
        background-size: 100% 100%;
        position: absolute;
        top: 310px;
        left: 10px;
        transition: all 1s;

        .closeButton {
          width: 14px;
          height: 79px;
          position: absolute;
          right: 0px;
          top: 268px;
          cursor: pointer;
        }

        .content_left_2_content {
          .searchContent {
            width: 385px;
            height: 51px;
            background: rgba(0, 20, 54, 0.64);
            border-radius: 5px;
            border: 1px solid #14dbff;
            position: absolute;
            top: 79px;
            left: 32px;

            .searchInputModule {
              z-index: 9999;
            }

            .searchIconModule {
              width: 37px;
              height: 37px;
              background: rgba(176, 214, 255, 0.21);
              position: absolute;
              right: 10px;
              top: 6px;
              cursor: pointer;

              .searchIcon {
                width: 20px;
                height: 20px;
                background: url('../../assets/images/intelligentIrrigation/searchIcon.png');
                background-size: 100% 100%;
                margin: 9px;
              }
            }

            .listContent {
              position: absolute;
              left: -16px;
              width: 408px;
              height: 498px;
              top: 70px;

              .listContentModule {
                display: flex;
                width: 410px;
                height: 48px;
                background: rgba(78, 190, 255, 0.21);
                margin-bottom: 9px;
                cursor: pointer;

                .circle {
                  width: 8px;
                  height: 8px;
                  background: #14dbff;
                  border-radius: 50%;
                  margin: 20px 10px 0 10px;
                }

                .listWord {
                  font-size: 16px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #f4f9ff;
                  line-height: 48px;
                }

                .buttonIcon {
                  width: 9px;
                  height: 15px;
                  background: url('../../assets/images/intelligentIrrigation/listIcon.png');
                  background-size: 100% 100%;
                  margin-top: 18px;
                }
              }
            }
          }
        }
      }

      .openContentLeft2 {
        width: 13px;
        height: 78px;
        background: url('../../assets/images/intelligentIrrigation/openContentLeft1.png');
        background-size: 100% 100%;
        opacity: 0;
        position: absolute;
        top: 560px;
        cursor: pointer;
      }

      .content_right {
        width: 667px;
        height: 931px;
        background: url('../../assets/images/intelligentIrrigation/content_right_1.png');
        background-size: 100% 100%;
        position: absolute;
        top: 5px;
        right: 22px;
        transition: all 1s;

        .closeButton {
          width: 14px;
          height: 79px;
          position: absolute;
          left: 0px;
          top: 390px;
          cursor: pointer;
        }

        .content_right_top {
          display: flex;
          position: absolute;
          top: 89px;
          left: 40px;

          .znzmName {
            font-size: 20px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            letter-spacing: 1px;
          }

          .znzmNumber {
            font-size: 16px;
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
            font-weight: bold;
            text-align: center;
            color: rgba(255, 255, 255, 0.57);
            letter-spacing: 0.8px;
            margin: 5px 0 0 5px;
          }
        }

        .content_right_zb_module {
          display: flex;
          position: absolute;
          top: 132px;
          left: 41px;

          .zb_module {
            width: 190px;
            height: 82px;
            background: url('../../assets/images/intelligentIrrigation/znzmZBBg.png');
            background-size: 100% 100%;
            margin-right: 17px;
            position: relative;

            .content_right_zb_module_icon {
              width: 43px;
              height: 43px;
              position: absolute;
              top: 19px;
              left: 15px;
            }

            .zqsw {
              background: url('../../assets/images/intelligentIrrigation/zqsw.png');
              background-size: 100% 100%;
            }

            .zhsw {
              background: url('../../assets/images/intelligentIrrigation/zhsw.png');
              background-size: 100% 100%;
            }

            .ll {
              background: url('../../assets/images/intelligentIrrigation/ll.png');
              background-size: 100% 100%;
            }

            .content_right_zb_module_value {
              font-size: 22px;
              font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
              font-weight: 400;
              text-align: left;
              color: #00fbff;
              position: absolute;
              top: 13px;
              left: 74px;
            }

            .content_right_zb_module_name {
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: left;
              color: #ffffff;
              position: absolute;
              top: 40px;
              left: 76px;
            }
          }
        }

        .content_right_button_module {
          display: flex;
          position: absolute;
          top: 235px;
          left: 38px;

          .content_right_button {
            width: 105px;
            height: 35px;
            border-radius: 2px;
            background: rgba(0, 156, 255, 0.3);
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: bold;
            text-align: center;
            color: rgba(255, 255, 255, 0.38);
            line-height: 36px;
            margin-right: 9px;
            cursor: pointer;
          }

          .contentRightButtonActiveClass {
            width: 105px;
            height: 35px;
            background: #009cff;
            border-radius: 2px;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            line-height: 36px;
            margin-right: 9px;
            cursor: pointer;
          }
        }

        .content_right_middle_module {
          width: 597px;
          height: 258px;
          border: 1px solid #18faff;
          background: rgba(29, 148, 239, 0.08);
          position: absolute;
          top: 286px;
          left: 39px;

          .content_right_middle_module_content {
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            line-height: 258px;
          }
        }

        .content_right_kd_module {
          width: 598px;
          height: 49px;
          background: linear-gradient(to right, rgba(29, 148, 239, 0.2), rgba(16, 167, 154, 0));
          display: flex;
          position: absolute;
          top: 562px;
          left: 38px;

          .dqkd {
            display: flex;
            width: 50%;

            .dqkdIcon {
              width: 18px;
              height: 18px;
              background: url('../../assets/images/intelligentIrrigation/dqkdIcon.png');
              background-size: 100% 100%;
              margin: 15px 11px 0 13px;
            }

            .dqkdName {
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: bold;
              text-align: left;
              color: #ffffff;
              line-height: 47px;
            }

            .dqkdValue {
              font-size: 22px;
              font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
              font-weight: 400;
              text-align: left;
              color: #00fbff;
              line-height: 48px;
            }

            .dqkdUnit {
              font-size: 18px;
              font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
              font-weight: 400;
              text-align: left;
              color: #00fbff;
              line-height: 14px;
            }
          }

          .sdszkd {
            display: flex;
            width: 50%;

            .sdszkdName {
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: bold;
              text-align: center;
              color: #ffffff;
              line-height: 48px;
            }
          }
        }

        .content_right_bottom_module {
          width: 598px;
          height: 118px;
          position: absolute;
          top: 650px;
          left: 32px;
          display: flex;

          .content_right_bottom_module_icon {
            width: 117px;
            height: 114px;
            background: url('../../assets/images/intelligentIrrigation/rightBottomIcon.png');
            background-size: 100% 100%;
            margin-right: 24px;
          }

          .content_right_bottom_module_content {
            .sluiceNoModule {
              display: flex;
              margin-bottom: 10px;

              .sluiceNoModuleName {
                font-size: 16px;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: bold;
                text-align: center;
                color: #ffffff;
              }

              .sluiceNoModuleValue {
                font-size: 16px;
                font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
                font-weight: 400;
                text-align: center;
                color: #ffffff;
              }
            }

            .sbModule {
              display: flex;
              margin-bottom: 14px;

              .sbztModule {
                display: flex;
                width: 200px;

                .sbztModuleName,
                .sbztModuleValue {
                  font-size: 16px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                  font-weight: bold;
                  text-align: center;
                  color: #ffffff;
                  margin-left: 4px;
                }
              }

              .sbgzModule {
                display: flex;
                width: 200px;

                .sbgzModuleName,
                .sbgzModuleValue {
                  font-size: 16px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                  font-weight: bold;
                  text-align: center;
                  color: #ffffff;
                  margin-left: 4px;
                }
              }
            }

            .content_right_bottom_module_button {
              display: flex;

              .button_qd {
                width: 94px;
                height: 40px;
                background: #009cff;
                border-radius: 4px;
                margin-right: 20px;
                display: flex;
                cursor: pointer;

                .button_qd_icon {
                  width: 21px;
                  height: 20px;
                  background: url('../../assets/images/intelligentIrrigation/qdIcon.png');
                  background-size: 100% 100%;
                  margin: 10px;
                }

                .button_qd_name {
                  font-size: 16px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                  font-weight: 700;
                  text-align: center;
                  color: #ffffff;
                  line-height: 40px;
                }
              }

              .button_jt {
                width: 94px;
                height: 40px;
                background: #e22649;
                border-radius: 4px;
                margin-right: 20px;
                display: flex;
                cursor: pointer;

                .button_jt_icon {
                  width: 16px;
                  height: 16px;
                  background: url('../../assets/images/intelligentIrrigation/jtIcon.png');
                  background-size: 100% 100%;
                  margin: 13px 13px 10px 10px;
                }

                .button_jt_name {
                  font-size: 16px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                  font-weight: 700;
                  text-align: center;
                  color: #ffffff;
                  line-height: 40px;
                }
              }

              .button_zdkz {
                width: 94px;
                height: 40px;
                background: #00d491;
                border-radius: 4px;
                font-size: 16px;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                font-weight: 700;
                text-align: center;
                color: #ffffff;
                line-height: 40px;
                margin-right: 20px;
                cursor: pointer;
              }

              .button_gbfm {
                width: 94px;
                height: 40px;
                background: #acacac;
                border-radius: 4px;
                font-size: 16px;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                font-weight: 700;
                text-align: center;
                color: #ffffff;
                line-height: 40px;
                cursor: pointer;
              }
            }
          }
        }

        .content_right_control_module {
          display: flex;
          position: absolute;
          top: 800px;
          left: 36px;

          .control_module {
            margin-right: 12px;
            cursor: pointer;

            .control_icon {
              width: 88px;
              height: 63px;
            }

            .yckz_icon {
              background: url('../../assets/images/intelligentIrrigation/yckz.png');
              background-size: 100% 100%;
            }

            .yckz_icon_active {
              background: url('../../assets/images/intelligentIrrigation/yckzActive.png');
              background-size: 100% 100%;
            }

            .xsmx_icon {
              background: url('../../assets/images/intelligentIrrigation/xsmx.png');
              background-size: 100% 100%;
            }

            .xsmx_icon_active {
              background: url('../../assets/images/intelligentIrrigation/xsmxActive.png');
              background-size: 100% 100%;
            }

            .gjgl_icon {
              background: url('../../assets/images/intelligentIrrigation/gjgl.png');
              background-size: 100% 100%;
            }

            .gjgl_icon_active {
              background: url('../../assets/images/intelligentIrrigation/gjglActive.png');
              background-size: 100% 100%;
            }

            .lssj_icon {
              background: url('../../assets/images/intelligentIrrigation/lssj.png');
              background-size: 100% 100%;
            }

            .lssj_icon_active {
              background: url('../../assets/images/intelligentIrrigation/lssjActive.png');
              background-size: 100% 100%;
            }

            .czjl_icon {
              background: url('../../assets/images/intelligentIrrigation/czjl.png');
              background-size: 100% 100%;
            }

            .czjl_icon_active {
              background: url('../../assets/images/intelligentIrrigation/czjlActive.png');
              background-size: 100% 100%;
            }

            .whjl_icon {
              background: url('../../assets/images/intelligentIrrigation/whjl.png');
              background-size: 100% 100%;
            }

            .whjl_icon_active {
              background: url('../../assets/images/intelligentIrrigation/whjlActive.png');
              background-size: 100% 100%;
            }

            .control_name {
              font-size: 18px;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-weight: 700;
              text-align: center;
              color: #eef8ff;
              line-height: 48px;
            }

            .control_name_active {
              font-size: 18px;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-weight: 700;
              text-align: center;
              color: #00fbff;
              line-height: 48px;
            }
          }
        }
      }

      .openContentRight {
        width: 13px;
        height: 78px;
        background: url('../../assets/images/intelligentIrrigation/openContentRight.png');
        background-size: 100% 100%;
        opacity: 0;
        position: fixed;
        top: 482px;
        right: 0px;
        cursor: pointer;
      }

      .content_center_top {
        position: absolute;
        top: 11px;
        left: 480px;
        display: flex;

        .content_center_top_module {
          width: 175px;
          height: 82px;
          background: url('../../assets/images/intelligentIrrigation/centerTopBg.png');
          background-size: 100% 100%;
          margin-right: 9px;
          position: relative;

          .content_center_top_module_icon {
            width: 43px;
            height: 43px;
            position: absolute;
            top: 19px;
            left: 15px;
          }

          .jyl {
            background: url('../../assets/images/intelligentIrrigation/jyl.png');
            background-size: 100% 100%;
          }

          .ggl {
            background: url('../../assets/images/intelligentIrrigation/ggl.png');
            background-size: 100% 100%;
          }

          .sw {
            background: url('../../assets/images/intelligentIrrigation/sw.png');
            background-size: 100% 100%;
          }

          .content_center_top_module_value {
            font-size: 22px;
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
            font-weight: 400;
            text-align: left;
            color: #00fbff;
            position: absolute;
            top: 13px;
            left: 74px;
          }

          .content_center_top_module_name {
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #ffffff;
            position: absolute;
            top: 40px;
            left: 76px;
          }
        }
      }

      .legendModule {
        width: 526px;
        height: 144px;
        background: url('../../assets/images/intelligentIrrigation/legendBg.png');
        background-size: 100% 100%;
        position: absolute;
        top: 806px;
        left: 592px;
        transition: all 1s;

        .closeButton {
          width: 79px;
          height: 14px;
          position: absolute;
          left: 226px;
          top: 130px;
          cursor: pointer;
        }

        .legendTitle {
          -webkit-background-clip: text;
          color: transparent;
          background-image: linear-gradient(4deg, #18faff 1%, #ffffff 98%);
          font-size: 20px;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: 700;
          text-align: center;
          margin-top: 7px;
          margin-bottom: 6px;
        }

        .legendContent {
          display: flex;

          .legendContentModule {
            width: 90px;

            .legendIcon {
              width: 50px;
              height: 55px;
              margin: 0 auto;
            }

            .legendIconNysz {
              background: url('../../assets/images/intelligentIrrigation/nysz.png');
              background-size: 100% 100%;
            }

            .legendIconJj {
              background: url('../../assets/images/intelligentIrrigation/jj.png');
              background-size: 100% 100%;
            }

            .legendIconBz {
              background: url('../../assets/images/intelligentIrrigation/bz.png');
              background-size: 100% 100%;
            }

            .legendIconQx {
              background: url('../../assets/images/intelligentIrrigation/qx.png');
              background-size: 100% 100%;
            }

            .legendIconSp {
              background: url('../../assets/images/intelligentIrrigation/sp.png');
              background-size: 100% 100%;
            }

            .legendIconSq {
              background: url('../../assets/images/intelligentIrrigation/sq.png');
              background-size: 100% 100%;
            }

            .legendWord {
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: bold;
              text-align: center;
              color: #f4f9ff;
            }
          }
        }
      }

      .openLegend {
        width: 78px;
        height: 13px;
        background: url('../../assets/images/intelligentIrrigation/openLegend.png');
        background-size: 100% 100%;
        opacity: 0;
        position: fixed;
        bottom: 0px;
        left: 822px;
        cursor: pointer;
      }
    }
  }
</style>
<style lang="less">
  .intelligentIrrigation .el-input--medium .el-input__inner {
    height: 50px;
    line-height: 50px;
    border: none;
    background-color: transparent;
    color: #fff;
    font-size: 18px;
  }

  .intelligentIrrigation .el-input-number--medium {
    width: 120px;
    border: 1px solid rgba(0, 242, 248, 0.41);
    border-radius: 4px;
    background: rgba(5, 35, 91, 0.41);
  }

  .sdszkdNumber .el-input--medium .el-input__inner {
    font-size: 22px;
    font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
    font-weight: 400;
    text-align: center;
    color: #00fbff;
    line-height: 14px;
    height: 46px;
  }

  .sdszkdNumber .el-input-number__decrease {
    background: transparent;
    border-left: 1px solid #00fbff !important;
    border-top: 1px solid #00fbff !important;
    color: #00fbff;
    line-height: 23px !important;
  }

  .sdszkdNumber .el-input-number__increase {
    background: transparent;
    border-left: 1px solid #00fbff;
    border-bottom: none !important;
    color: #00fbff;
    line-height: 23px !important;
  }
</style>